<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    首页。。。

    <form action="/MyWeb2/UserServlet">
        <input type="hidden" name="method" value="login">
        用户名:<input type="text" name="userName"><br/>
        密码:<input type="password" name="pwd"><br/>
            <input type="submit" value="登录">
    </form>

</body>
</html>

<script>
    function loadBooks() {
        //1 创建ajax的异步请求对象 xmlHttpRequest
        let xmlHttpRequest = new XMLHttpRequest();




        //2 调用open方法建立连接
        xmlHttpRequest.open("GET","/MyWeb2/BooksServlet");

        //3 设置http请求头
        xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");


        //4 发送请求

        xmlHttpRequest.send(null);

        //5 接收服务端返回的结果 给onreadystatechangen属性注册回调函数 ，在通信状态改变时，会自动调用fucntion中的代码
        xmlHttpRequest.onreadystatechange = function () {
            console.log( xmlHttpRequest.readyState); //获得通讯状态。
            if (xmlHttpRequest.readyState==4){
                console.log("通讯完成，可以获取服务端的返回结果了");
                console.log("服务端的返回结果为:",xmlHttpRequest.responseText);
             //   document.getElementById("myDiv").innerHTML=xmlHttpRequest.responseText;
                //解析时，如果服务返回的字符串是在[]开头结尾的表示解析后得到的是数组
                        //如果服务端返回的字符串是{}开头结尾的表示解析后得到的是对象

                let jsonObj = JSON.parse(xmlHttpRequest.responseText);//{"code":1,"msg":"系统错误:原因null"}
                //{"code":0,"msg":"成功","data":[xxxx]}
                if (jsonObj.code!=0){

                    alert(jsonObj.msg);
                    return;
                }

                let booksArray = jsonObj.data;

                console.log(booksArray);
                //
                for(let i=0;i<booksArray.length;i++){
                    let tr1 =  document.createElement("tr");
                    let td1 =  document.createElement("td");
                    let td2 =  document.createElement("td");
                    let td3 =  document.createElement("td");
                    let td4 =  document.createElement("td");
                    let td5 =  document.createElement("td");
                    let td6 =  document.createElement("td");

                    tr1.appendChild(td1);
                    tr1.appendChild(td2);
                    tr1.appendChild(td3);
                    tr1.appendChild(td4);
                    tr1.appendChild(td5);
                    tr1.appendChild(td6);

                    td1.innerHTML = booksArray[i].book_name;
                    td2.innerHTML = booksArray[i].isbn;
                    td3.innerHTML = booksArray[i].author;
                    td4.innerHTML = booksArray[i].publish;
                    td5.innerHTML = "<img width='100px' src='"+booksArray[i].pic_url+"' />"
                    td6.innerHTML =  "<a href='"+booksArray[i].book_url+"'>点击购买</a>"


                    document.getElementById("myTableBody").appendChild(tr1);
                }



            }
        }
    }


</script>